<template>
  <div>
    <div class="org-detail-list">
      <img class="bg-img" :src="orgDetail.bgImage" alt="">
      <p class="org-detail-name">{{orgDetail.name}}</p>
      <p class="org-detail-remark">{{orgDetail.remark}}</p>
    </div>
    <Divider>课程</Divider>
    <div class="org-detail-list">
      <Row type="flex" style="margin:20px 0">
        <Col span="6" v-for="item in courseList" :key="item.id">
          <div class="org-list" @click="courseDetail(item.id)">
            <img :src="item.handcover" alt="">
            <p>{{item.courseName}}</p>
          </div>
        </Col>
      </Row>
      <page-com style="width: 100%" :total="courseTotal" @page-change="coursePageChange"></page-com>
    </div>
    <Divider>老师</Divider>
    <div class="org-detail-list">
      <Row type="flex" style="margin:20px 0">
        <Col span="6" v-for="item in teacherList" :key="item.id">
          <div class="tarcher-list" @click="teacherDetail(item.id)">
            <img v-if="item.photo === null" src="./../../../assets/images/avatar1.jpg" alt="">
            <img v-else :src="item.photo" alt="">
            <p>{{item.staffName}}</p>
          </div>
        </Col>
      </Row>
      <page-com style="width: 100%" :total="courseTotal" @page-change="teacherPageChange"></page-com>
    </div>
  </div>
</template>

<script>
  import PageCom from '@/components/page'
  export default {
    components: {
      PageCom
    },
    name: 'org-detail',
    data() {
      return {
        orgDetail: {},
        courseNumber: 0,
        courseSize: 12,
        courseTotal: 0,
        courseList: [],
        teacherSize: 12,
        teacherNumber: 0,
        teacherTotal: 0,
        teacherList: []
      }
    },
    mounted() {
      this.searchOrg()
      this.coursePage()
      this.teacherPage()
    },
    methods: {
      searchOrg() {
        let id = this.$route.query.id
        if (!id) {
          this.$router.go(-1)
        }
        this.$get('/api/api/app/org/getDetail', {id: id}).then((res) => {
          if (res.code === 0) {
            this.orgDetail = res.data
          }
        })
      },
      coursePage() {
        let id = this.$route.query.id
        this.$get('/api/api/student/app/course/page', {
          size: this.courseSize,
          number: this.courseNumber,
          orgId: id
        }).then((res) => {
          if (res.code === 0) {
            this.courseList = res.data
          }
        })
      },
      teacherPage() {
        let id = this.$route.query.id
        this.$get('/api/app/teacher/page', {
          size: this.teacherSize,
          number: this.teacherNumber,
          orgId: id
        }).then((res) => {
          if (res.code === 0) {
            this.teacherList = res.data
          }
        })
      },
      courseDetail(id) {
        const url = this.$router.resolve({path: '/index/course-detail', query: {id: id}})
        window.open(url.href, '_blank')
      },
      teacherDetail(id) {
        let url = this.$router.resolve({path: '/index/teacher-detail', query: {id: id}})
        window.open(url.href, '_blank')
      },
      coursePageChange(data) {
        this.courseNumber = data
      },
      teacherPageChange(data) {
        this.teacherNumber = data
      }
    }
  }
</script>

<style scoped>
  .org-detail-list{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 40px;
    min-width: 1200px;
  }
  .bg-img{
    width: 100%;
    height: 280px;
  }
  .org-detail-name{
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }
  .org-detail-remark{
    line-height: 30px;
  }
  .org-list{
    height: 188px;
    background: #fff;
    margin: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .org-list img{
    width: 100%;
    height: 158px;
  }
  .org-list p{
    height: 30px;
    line-height: 30px;
  }
  .tarcher-list{
    height: 230px;
    background: #fff;
    margin: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tarcher-list img{
    width: 100%;
    height: 200px;
  }
  .tarcher-list p{
    height: 30px;
    line-height: 30px;
  }

</style>
